<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate></v-progress-linear>
        <v-app-bar app elevation="0" dense color="white">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1">{{
                appTitle
            }}</v-toolbar-title>

            <v-btn icon @click="newCommentDialog = true">
                <v-icon>mdi-plus</v-icon>
            </v-btn>
        </v-app-bar>

        <v-container>
            <v-card elevation="0" class="mb-2 pa-4 text--primary">
                <div v-for="(item, index) of items" :key="item.id">
                    <v-divider v-if="index > 0"></v-divider>
                    <v-row dense no-gutters>
                        <v-col cols="auto">
                            <v-avatar size="35" class="mt-2 mr-2">
                                <v-img src="/asset/h5/img/avatar.png"></v-img>
                            </v-avatar>
                        </v-col>
                        <v-col>
                            <div class="pt-1">
                                <span class="subtitle-2">{{
                                    item.user_name
                                }}</span>
                                <span class="ml-4 text-caption">{{
                                    item.created_at
                                }}</span>
                            </div>
                            <div class="pb-1 my-2">{{ item.comment }}</div>
                        </v-col>
                    </v-row>
                </div>
            </v-card>

            <v-row dense v-if="items.length > 0">
                <v-col cols="12" v-intersect="loadMore" v-if="!finished">
                    <v-btn
                        :ripple="false"
                        plain
                        text
                        block
                        @click="loadMore"
                        :loading="loading"
                        >加载更多</v-btn
                    >
                </v-col>
                <v-col cols="12" v-else>
                    <v-btn disabled plain text block>没有更多数据了...</v-btn>
                </v-col>
            </v-row>
            <v-row dense v-else-if="!loading">
                <v-col cols="12">
                    <v-btn disabled plain text block>暂无数据...</v-btn>
                </v-col>
            </v-row>
        </v-container>

        <v-dialog v-model="newCommentDialog">
            <v-card>
                <v-card-title>添加跟踪记录</v-card-title>
                <v-card-text>
                    <v-textarea
                        filled
                        dense
                        hide-details
                        placeholder="跟踪内容"
                        v-model="newComment"
                    ></v-textarea>
                </v-card-text>
                <v-card-actions>
                    <v-btn
                        block
                        depressed
                        color="primary"
                        :loading="saving"
                        @click="saveComment"
                    >
                        保存
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";

export default {
    data: () => ({
        loading: false,
        items: [],
        pageNo: 1,
        pageSize: 10,
        finished: false,
        newCommentDialog: false,
        saving: false,
        newComment: "",
    }),
    computed: {
        appTitle() {
            return "跟踪记录";
        },
        ...mapGetters(["uid"]),
    },
    watch: {
        id(v) {
            this.load();
        },
    },

    created() {
        this.id = this.$route.params.id;
        this.load();
    },

    beforeRouteUpdate(to, from, next) {
        this.id = to.params.id;
        next();
    },
    methods: {
        saveComment() {
            const that = this;
            that.saving = true;
            axios
                .post(`/v1/user/loan/${this.id}/comment`, {
                    comment: that.newComment,
                })
                .then((response) => {
                    if (response.data.code == 0) {
                        that.items.unshift(response.data.data);
                        that.newCommentDialog = false;
                        that.newComment = "";
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.saving = false;
                });
        },
        load() {
            const that = this;
            that.loading = true;
            axios
                .get(`/v1/user/loan/${this.id}/comment`, {
                    params: {
                        pageSize: this.pageSize,
                        page: this.pageNo,
                    },
                })
                .then((response) => {
                    if (response.data.code == 0) {
                        that.items = that.items.concat(
                            response.data.data.items
                        );
                        if (response.data.data.items.length < that.pageSize) {
                            that.finished = true;
                        }
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.loading = false;
                });
        },
        loadMore() {
            this.pageNo++;
            this.load();
        },
    },
};
</script>

<style lang="scss"></style>
